<template>
  <div class="erp-page-form">
    <vxe-modal
      v-if="type === 'modal'"
      v-model="visibleDialog"
      :title="title"
      :loading="loading"
      :show-footer="true"
      :resize="true"
      :transfer="true"
      :width="widthCom"
      :height="heightCom"
      :z-index="1100"
      :remember="true"
      @close="handleClose"
    >
      <template #default>
        <div ref="scrollBody">
          <el-scrollbar style="height: 100%;width: 100%;padding-bottom: 15px">
            <div
              class="erp-page-form-body"
              :class="{fullscreen: fullscreen}"
            >
              <slot name="default" />
              <erp-form
                ref="form"
                :model="form"
                :rules="rules"
                :label-width="labelWidth"
                :inline="inlineForm"
                :label-suffix="labelSuffix"
                :validate-on-rule-change="validateOnRuleChange"
                @submit.native.prevent
              >
                <el-tabs v-if="tab && tab.enable">
                  <slot
                    name="tab"
                    :form="form"
                  />
                </el-tabs>
                <slot
                  v-else
                  name="form"
                  :form="form"
                />
              </erp-form>
            </div>
          </el-scrollbar>
        </div>
      </template>
      <template slot="footer">
        <slot name="footer-append" />
        <el-button
          plain
          class="close"
          @click="handleClose"
        >
          关闭
        </el-button>
      </template>
    </vxe-modal>
    <erp-drawer
      v-else-if="type === 'drawer'"
      :title="title"
      :visible.sync="visibleDialog"
      :show-close="false"
      direction="rtl"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :size="width"
      :loading="loading"
      :append-to-body="appendToBody"
      :destroy-on-close="true"
      @close="handleClose"
    >
      <template #default>
        <el-scrollbar style="height: 100%;width: 100%;">
          <div
            class="erp-page-form-body"
            :class="{fullscreen: fullscreen}"
          >
            <slot name="default" />
            <erp-form
              ref="form"
              :model="form"
              :rules="rules"
              :label-width="labelWidth"
              :inline="inlineForm"
              :label-suffix="labelSuffix"
              :validate-on-rule-change="validateOnRuleChange"
              @submit.native.prevent
            >
              <slot
                name="form"
                :form="form"
              />

              <!--                            <el-tabs type="card" class="erp-page-form-tabs" >-->
              <!--                                <el-tab-pane-->
              <!--                                    :label="basicInfo"-->
              <!--                                    v-if="$slots.form"-->
              <!--                                >-->
              <!--                                    <el-row>-->
              <!--                                        <slot name="form" :form="form"></slot>-->
              <!--                                    </el-row>-->
              <!--                                </el-tab-pane>-->
              <!--                                <slot name="tab"></slot>-->
              <!--                            </el-tabs>-->
            </erp-form>
          </div>
        </el-scrollbar>
      </template>
      <template slot="footer">
        <slot name="footer-append" />
      </template>
    </erp-drawer>
  </div>
</template>

<script>
import Vue from 'vue';
import ErpForm from '@/components/erp/ErpListForm/ErpForm';
import {Dialog, Form, FormItem, Row, TabPane, Tabs} from "element-ui";
import {cloneJson} from "@/utils";
import ErpDrawer from '@/components/erp/ErpDrawer/ErpDrawer';

Vue.use(Dialog);
Vue.use(Row);
Vue.use(Tabs);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(TabPane);
/**
 * 表单页面
 * @author maolin
 */
export default {
  name: "ErpPageForm",
  components: {
    ErpDrawer,
    ErpForm,
  },
  props: {
    /**
     * 是否开启tab页面
     * @public
     */
    tab: {
      type: Object,
      default () {
        return {
          enable: false
        };
      }
    },
    /**
     * 添加到body中
     * @public
     */
    appendToBody: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示表单
     * @public
     */
    visibleDialogForm: {
      type: Boolean,
      default: false
    },
    /**
     * 表单项后缀
     * @public
     */
    labelSuffix: {
      type: String,
      default: ''
    },
    /**
     * 宽度
     * @public
     */
    size: {
      type: String,
      default: '700px'
    },
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 关闭后销毁
     * @public
     */
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 表单项是否是inline的
     * @public
     */
    inlineForm: {
      type: Boolean,
      default: false
    },
    /**
     * 表单项宽度
     * @public
     */
    labelWidth: {
      type: String,
      default() {
        return '100px';
      }
    },
    /**
     * 表单规则
     * @public
     */
    rules: {
      type: Object,
      default() {
        return {};
      }
    },
    /**
     * 是否加载中
     * @public
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否处于保存加载中
     * @public
     */
    saveLoading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否在规则变更之后立即验证一次
     * @public
     */
    validateOnRuleChange: {
      type: Boolean,
      default: false
    },
    /**
     * 距离顶部的高度
     * @public
     */
    top: {
      type: String,
      default: '40px'
    },
    /**
     * 基础信息标题
     * @public
     */
    basicInfo: {
      type: String,
      default () {
        return this.$t('common.erp.form.basicInfo');
      }
    },
    /**
     * 保存按钮的文字
     * @public
     */
    saveButtonText: {
      type: String,
      default () {
        return this.$t('common.save');
      }
    },
    /**
     * 是否展示保存按钮
     * @public
     */
    showSaveButton: {
      type: Boolean,
      default: true,
    },
    /**
     * 表单配置项
     * @public
     */
    formConfigs: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 类型，可选(modal:模态框，drawer:抽屉)
     * @public
     */
    type: {
      type: String,
      default: "modal"
    },
    /**
     * 宽度
     * @public
     */
    width: {
      type: [String, Number],
      default () {
        return "98%";
      }
    },
    /**
     * 高度
     * @public
     */
    height: {
      type: String,
      default: "98%"
    }
  },
  data () {
    return {
      fullscreen: false,
      drawerVisible: false,
      tabPaneHeight: 0,
    };
  },
  computed: {
    widthCom () {
      return this.width ? this.width : '98%';
    },
    heightCom () {
      return this.height ? this.height : '98%';
    },
    visibleDialog: {
      get () {
        return this.visibleDialogForm;
      },
      set (val) {
        this.$emit('update:visibleDialogForm', val);
      }
    }
  },
  watch: {
  },
  mounted() {

    this.fetchTabPaneHeight();
  },
  methods: {
    /**
     * 获取tab容器的高度
     * @private
     */
    fetchTabPaneHeight () {
      this.$nextTick(() => {
        if (this.$refs.scrollBody) {
          let height = this.$refs.scrollBody.parentNode.offsetHeight;
          height = height - 55;
          this.tabPaneHeight = height;
          this.$emit('fetch-pane-height',height);
        }

      });
    },
    /**
     * 通知父组件关闭表单
     * @public
     */
    handleClose () {
      /**
       * 通知父组件关闭表单
       * @public
       */
      this.$emit('close');
    },
    /**
     * 全屏
     * @public
     */
    handleFullscreen () {
      this.fullscreen = true;
    },
    /**
     * 退出全屏
     * @public
     */
    exitFullscreen () {
      this.fullscreen = false;
    },
    /**
     * 保存表单
     * @param {string} formName 表单名称
     * @public
     */
    handleSave (formName) {
      this.$refs[formName].validate((valid, obj) => {
        this.$emit('fail-validate', {failField: obj});
        if (valid) {
          let form = cloneJson(this.form);
          this.$emit('save', form);
        } else {
          return false;
        }
      });
    },
    /**
     * 重置表单
     * @public
     */
    resetForm () {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
    $primaryColor: var(--primary-color);
    $primaryColor10: var(--primary-color10);
    .erp-page-form{

    }
    ::v-deep{
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
        .vxe-modal--box {
            .vxe-modal--footer{
                background-color: #F6F7F9;
            }
        }
    }
    .erp-page-form-body{
        ::v-deep{
            .el-tabs{
                background-color: #fff;
                &.el-tabs--card{
                    .el-tabs__header{
                    }
                }
                .el-tabs__nav{
                    .el-tabs__item.is-top{
                        &.is-active{
                            background-color: #fff;
                            border-bottom: 1px solid #f2f2f2;
                        }
                    }
                }
                .el-tabs__content{
                    padding: 0 20px;
                    overflow-y: auto;
                }
            }
        }
        &.fullscreen{
            ::v-deep{
                .el-tabs{
                    .el-tabs__content{
                        height: calc(100vh - 35px - 59px - 56px);
                        overflow-y: auto;
                    }
                }
            }
        }
    }
</style>
